<template>
  <div>
    <el-table :data="list" size="mini" class="custom-table" height="200">
      <!-- 公司，人员，事件，时间 -->
      <!-- <el-table-column prop="" label="公司"></el-table-column> -->
      <el-table-column prop="workerName" label="人员名称"></el-table-column>
      <el-table-column prop="alarmInfo" label="事件名称"></el-table-column>
      <!-- <el-table-column prop="createTime" label="报警时间"></el-table-column> -->
      <el-table-column label="报警时间" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 公共变量
import { TOKEN_PRODER, TOKEN_DEV, VUE_BASE_API } from "@/utils/publicdata";
const axios = require("axios");

export default {
  data() {
    return {
      list: [
        // {
        //   company: "中煤木垒",
        //   name: "测试人员",
        //   event: "人员聚集",
        //   time: "2024-09-19"
        // },
        // {
        //   company: "中煤木垒",
        //   name: "测试人员",
        //   event: "人员聚集",
        //   time: "2024-09-18"
        // },
        // {
        //   company: "中煤木垒",
        //   name: "测试人员",
        //   event: "人员聚集",
        //   time: "2024-09-17"
        // },
        // {
        //   company: "中煤木垒",
        //   name: "测试人员",
        //   event: "人员聚集",
        //   time: "2024-09-16"
        // },
        // {
        //   company: "中煤木垒",
        //   name: "测试人员",
        //   event: "人员聚集",
        //   time: "2024-09-15"
        // }
      ]
    };
  },
  created() {
    // for (let index = 0; index < 6; index++) {
    //   this.list.push({
    //     company: '公司' + index,
    //     name: '张三' + index,
    //     event: '人员聚集' + index,
    //     time: '2024-09-1' + index
    //   })
    // }
    this.getsafetyHatAlarm();
  },
  methods: {
    getsafetyHatAlarm() {
      // 定义请求体参数
      const requestBody = {
        // sn: "E7D6E86A83E841BAA53E73ACD7C2371B",
        // videoType: 1,
        // standardType: 0
      };

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PRODER, // 替换为你的实际 token
        "Content-Type": "application/json"
      };

      // 定义分页参数
      const pageNo = 1; // 替换为你的实际页码
      const pageSize = 50; // 替换为你的实际每页大小

      // 构建请求 URL，包含分页参数
      const url = `http://101.43.164.214:11111/xmgl/safetyHatAlarm/page?pageNo=${pageNo}&pageSize=${pageSize}`;

      // 发送 POST 请求
      axios
        .get(
          `https://zm.zhgdyun.com:11111/xmgl/safetyHatAlarm/page?pageNo=${pageNo}&pageSize=${pageSize}&type=1`,
          {
            headers
          }
        )
        .then(response => {
          if (response.data.keyCode == 401)
            return this.$message.warning("身份信息过期-请联系管理员");
          // console.log("树结构数据", response.data.result.records);
          console.log("告警事件", response.data.result.records);
          this.list = response.data.result.records;

          // this.traverseList(this.data);
          // console.log("处置摄像头播放数据--2", this.serialNumbers);
        })
        .catch(error => {
          console.error(
            "Error:",
            error.response ? error.response.data : error.message
          );
        });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px; /* 设置滚动条的宽度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #02bfc6; /* 滚动条的轨道颜色 */

  border-radius: 4px; /* 滚动条的圆角 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #004670; /* 滚动条的颜色 */
}

// 背景色透明
::v-deep(.el-table) {
  background-color: transparent !important;
  color: #ffffff;
  font-family: PingFang SC, PingFang SC;
  font-weight: 520;
  font-size: 16px;

  th.el-table__cell,
  tr {
    background-color: transparent !important;
  }
  thead {
    color: #0ec5ff;
  }
  td.el-table__cell,
  th.el-table__cell.is-leaf {
    border-bottom: none !important;
  }
  tbody tr:hover > td {
    background-color: transparent !important;
  }
  .el-table__cell {
    padding: 3px 0 !important;
  }
  &::before {
    height: 0 !important;
  }
}
</style>
